<template>
	<view class="center">
		<view class="card">
			<xbd-image-title title="近一年物资采购预估金额">
				<template>
					<view  >
						<text style="font-size: 56rpx; font-family: DIN, DIN-Bold; font-weight: 700;color: #000623;margin-right: 10rpx;">
							<text v-if="(Math.round(count/1000) / 10)>=0.1">
							{{ Math.round(count/1000) / 10 }}
							</text>
							<text v-else>
								0
							</text>
						</text>
						万元
					</view>
					
				</template>
			</xbd-image-title>
			<view class="charts" v-if="hackReset">
				<chart-ring-three v-if="is_show && (securityAlarm.data[0].num >=0.1 || securityAlarm.data[1].num >=0.1)"  :chartData="securityAlarm"></chart-ring-three>
				<xbd-zwnz v-else marginTop='200'></xbd-zwnz>
			</view>
		</view>
		<view class="card">
			<xbd-image-title title="近一年物资采购合格率分析">
			</xbd-image-title>
			<view class="charts" v-if="hackReset">
				<chart-ring-unit  v-if="is_show2 " :chartData="securityAlarm2"></chart-ring-unit>
				<xbd-zwnz v-else marginTop='200'></xbd-zwnz>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Prevention
	} from '@/api/index.js';
	export default {
		data() {
			return {
				is_show:false,
				is_show2:false,
				hackReset: true,
				count: '',
				securityAlarm: {
					unit: '个',
					data: [{
							grade: "月度物资",
							num: 0.1,
							const: 'const'
						},
						{
							grade: "紧急物资",
							num: 40,
							const: 'const'
						}
					]
				},
				securityAlarm2: {
					unit: '个',
					data: [{
							grade: "项目合格",
							num: 60,
							const: 'const'
						},
						{
							grade: "整改通过",
							num: 40,
							const: 'const'
						},
					]
				},
			};
		},
		methods: {
			async init() {
				const res = await Prevention.getGoodsChart()
				this.count = res.data.total
				this.securityAlarm.data[0].num = Math.round(res.data.first.month/1000) / 10
				this.securityAlarm.data[1].num =  Math.round(res.data.first.urgent/1000) / 10
				this.securityAlarm2.data[0].num = res.data.second.yse
				this.securityAlarm2.data[1].num = res.data.second.not
				// // 重新渲染dom节点  防止绘图出错
				if(res.data.first.month !==0 || res.data.first.urgent !==0 ){
					this.is_show = true
				}
				if(res.data.second.yse !==0 || res.data.second.not !==0 ){
					this.is_show2 = true
				}
				this.hackReset = false
				this.$nextTick(() => {
					this.hackReset = true
				})
				console.log(res, 'res2')
			}
		},
		created() {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 32rpx;

		.card {
			padding: 32rpx;
			background-color: #FFFFFF;
			margin-bottom: 32rpx;

			.charts {
				height: 500rpx;
			}

			.type {
				width: 600rpx;
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #8890a5;
			}
		}
	}
</style>
